<template>
	<transition name="hcj_dialog-fade">
		<div class="hcj_dialog_wrapper" v-show="visible" @click.self="handleClos()">
			<div 
			:class="[{
				'is_bg': this.$slots.bg
			}]"
			class="hcj_dialog" :style="{width, marginTop:top}">
				<div class="hcj_dialog_header">
					<span class="hcj_clos" @click="handleClos()">×</span>
					<slot name="title">
						<span>提示</span>
					</slot>
				</div>
				<div class="hcj_dialog_body">
					<slot>
						<span>这里是一段内容</span>
					</slot>
				</div>
				<div class="hcj_dialog_footer">
					<slot name="footer">
						<hcj-button type="line" @click="handleClos()">取消</hcj-button>
					</slot>
				</div>
				<div class="hcj_dialog_bg">
					<slot name="bg"></slot>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	import HcjSbutton from '../button/button.vue'
	import HcjBackground from '../../background/index.vue'
	export default {
		name: 'hcj-dialog',
		props: {
			width: {
				type: String,
				default: '35%',
			},
			top: {
				type: String,
				default: '15vh'
			},
			visible: {
				type: Boolean,
				default: false
			}
		},
		components: {
			HcjSbutton,
			HcjBackground
		},
		data() {
			return {

			}
		},
		methods: {
			handleClos() {
				this.$emit('update:visible',false)
			}
		}
	}
</script>

<style>
	.hcj_dialog_wrapper {
		position: fixed;
		top: -20px;
		right: -10px;
		bottom: -20px;
		left: -20px;
		overflow: auto;
		z-index: 2023;
		background-color: rgba(0, 0, 0, .5);
	}

	.hcj_clos {
		float: right;
		cursor: pointer;
	}

	.hcj_dialog {
		position: relative;
		margin: 15vh auto;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
		box-sizing: border-box;
		width: 35%;
	}

	.hcj_dialog_header {
		padding: 20px 20px 10px;
	}

	.hcj_dialog_body {
		padding: 10px 20px;
		/* background-color: aqua; */
		word-break: break-all;
		color: gray;
	}

	.hcj_dialog_footer {
		padding: 20px 15px;
		text-align: right;
		box-sizing: border-box;
		/* background-color: pink; */
	}

	.hcj_dialog_footer>* {
		margin-left: 15px;
	}
	
	/* 过渡 */
	.hcj_dialog-fade-enter-active {
		animation: fade .3s;
	}
	.hcj_dialog-fade-leave-active {
		animation: fade .3s reverse;
	}
	
	.is_bg {
		background-color: transparent;
	}
	.hcj_dialog_bg {
		border-radius: inherit;
	}
	@keyframes fade {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}
		100% {
			opacity: 1;
			transform: translateY(0px);
		}
	}
</style>